<template>
  <div>
<!-- @keyup.native.enter="submit" -->
    商品名称：<el-input
      v-model="name"
     
      placeholder="商品名称关键字"
      style="width: 200px"
    ></el-input>
    &nbsp;&nbsp;
    <el-button type="primary" @click="submit">查询</el-button>
    <el-divider content-position="left">商品列表</el-divider>


    <!-- 商品管理 -->
    <el-table :data="productData.result" style="width: 100%">
      <el-table-column label="商品图片" width="180">
        <template slot-scope="scope">
          <img :src="scope.row.img" alt="" height="80px"   style="object-fit: cover;width: 80px;">
        </template>
      </el-table-column>
      <el-table-column prop="product_name" label="商品名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="商品价格">
      </el-table-column>
      <el-table-column prop="sales" label="已售">
      </el-table-column>
      <el-table-column prop="category_id" label="商品分类">
      </el-table-column>
      <el-table-column label="操作" width="260px">
        <template slot-scope="scope">
          <el-button type="success" size="small" icon="el-icon-edit" circle
            @click="$router.push('/home/product-modify?product_id='+scope.row.product_id)"></el-button>
          <el-button type="danger" size="small" icon="el-icon-delete" circle @click="Delete(scope.row.product_id)"></el-button>
        </template>
      </el-table-column>
    </el-table>

     <!-- 分页器 -->
     <el-pagination
     background
      layout="->,total,prev,pager,next,jumper"
      :current-page="productData.page"
      :total="productData.count"
      :page-size="productData.pagesize"
      @current-change="changeCurrent($event)"
    >
    </el-pagination>

  </div>
</template>

<script>
import httpApi from '@/http'
export default {

  beforeRouteEnter(to, from, next) {
    next(vm => vm.listmall())
  },
  beforeRouteUpdate(to, from, next) {
    this.listmall();
    next();
  },

  data() {
    return {
      // tableData: [],
      name:"",
      productData:{
        page:1,
        pagesize:5,
        count:0,
        result:[]
      }

    }
  },

  mounted() {
    this.listmall()
  },

  methods: {
    // 列出所有商品
    listmall() {
      let params = {
        page:this.productData.page,
        pagesize:this.productData.pagesize
      }
      httpApi.mallApi.mallLsit(params).then(res => {
        console.log('商品列表', res);
        this.productData = res.data.data
      })
    },

    // 删除商品
    Delete(product_id) {
      console.log(product_id);
      httpApi.mallApi.delete({ product_id: product_id }).then(res => {
        console.log('删除的商品', res);
        // 删除成功后，你可能需要重新获取商品列表
        this.listmall();
      })
    },

    // 当前页码改变时触发
    changeCurrent(page) {
      console.log(page);
      this.productData.page = page; //修改当前页码
      // this.listMovies() //重新加载列表即可
      this.search();
    },
    submit(){
      this.productData.page = 1;
      this.search()
    },

    // 模糊查询电影列表
    search() {
      if (this.name.trim() == "") {
        this.listmall();
      } else {
        this.listProductByName();
      }
    },

    /** 通过关键字查询列表 */
    listProductByName(){
      let params = { 
        page:this.productData.page,
        pagesize:this.productData.pagesize,
        name:this.name
      }
      httpApi.mallApi.queryProductByName(params).then((res)=>{
       console.log('模糊查询结果：',res);
       this.productData.result = res.data.data
      })
    }

  },
}

</script>

<style lang="scss" scoped></style>